<template>
  <nav>
    <ul>
      <li><router-link to="/film" tag="li" active-class="xiaohuactive">
        <i class="iconfont icon-dianying"></i>
        <span>
          电影
        </span>
      </router-link></li>
      <li><router-link to="/cinema" tag="li" active-class="xiaohuactive">
        <i class="iconfont icon-yingyuan"></i>
        <span>
          影院
        </span>
      </router-link></li>
      <li><router-link to="/center" tag="li" active-class="xiaohuactive">
        <i class="iconfont icon-yixianshi_huaban"></i>
        <span>
          我的
        </span>
      </router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: '',

  data () {
    return {
    }
  },

  methods: {}
}

</script>
<style scoped lang='less'>
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 20px;
  text-align: center;
  background-color: #fff;
  z-index: 999;
}
ul{
  display: flex;
  li{
    flex: 1;
    display: flex;
    flex-direction: column;
    color: #979797;
    i{
      font-size: 20px;
    }
    span{
      font-size: 12px;
    }
  }
}
.xiaohuactive{
  color: red;
}
</style>
